<template>
    <div style="padding:20px 10px;">
        <admincentertb ref="httbRef" width="320" :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData">
            <template v-slot:autoBtn="slotProps">
                <el-button slot="autoBtn" type="text" @click="bindZsForm(slotProps.data)">绑定正式表单</el-button>
            </template>
        </admincentertb>
         <!-- 分页 -->
        <div style="text-align:right;margin-top:10px;">
            <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
      </div>

      <el-dialog
        title="绑定正式表单"
        :visible.sync="dialogVisible"
        width="20%"
        :close-on-click-modal="false">
        <el-select clearable style="width: 100%;" v-model="formId" placeholder="请选择绑定表单">
            <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.formName"
            :value="item.id">
            </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="formId.length==0" @click="isSureFun">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return{
            formId:"",
            options:[],
            tableUserData:[],
            total: 0,
            size:10,
            page: 1,
            dialogVisible:false,
            tabUserList:[
                {
                    key: 'deployName',
                    title: '事项名称'
                },
                {
                    key: 'place',
                    title: '表单标识'
                },
                {
                    key: 'definitionKey',
                    title: '事项标识'
                },
                {
                    key: 'createTime',
                    title: '创建时间'
                }
            ],
            deployId:"",
            btnIsShow:{
                update:false,
                operate: true,
                getDetile: true
            }
        }  
    },
    created(){
        request({
                url: '/ht-bpmn/complete/page?pageIndex=1&pageSize=1000',
                method: 'get',
                data:{}
            }).then(res => {
                if (res.code == 200) {
                    this.options = res.data.records
                }
            })
        this.getUserList()
    },
    methods:{
        isSureFun(){
            request({
                url: `/ht-bpmn/complete/bindCompleteForm?completeFormKey=${this.formId}&deployId=${this.deployId}`,
                method: 'post',
                data:{}
            }).then(res => {
                if (res.code == 200) {
                    this.dialogVisible = false
                    this.getUserList()
                    this.$message.success('操作成功')
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        bindZsForm(v){
            this.deployId = v.deployId
            this.dialogVisible = true
        },
        getUserList(){
            request({
                url: '/ht-bpmn/activiti/getDeployList',
                method: 'post',
                data:{
                    limit:this.size,
                    page:this.page
                }
            }).then(res => {
                if (res.code == 200) {
                    this.tableUserData = res.data.deploymentList
                    this.total = res.data.total
                }
            })
        },
        createPrelcObj(v){
            this.$router.push({path:'/sxTjDet/sxTjpage',query:{item:v}})
        },
        handleSizeChange(v) {
            this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },
    }
}
</script>


